<template>
  <div
    class="setting-box py-2.5 protectionSet outreach-box"
    :class="treeStore.isShowStrategyDetail ? 'not-click' : ''"
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.1)"
  >
    <div class="pl-8 py-2.5 font-bold text-base">外设防护</div>
    <div class="titleMargin outSet">
      <div class="leftCont">外设防护</div>
      <div>
        <el-switch v-model="data.peripheral_def" active-value="1" inactive-value="0">
        </el-switch>
      </div>
    </div>

    <template v-if="treeStore.osType == 'win'">
      <div class="pl-8 py-2.5 font-bold text-base">注册控制</div>
      <div class="titleMargin outSet">
        <div class="leftCont">注册控制</div>
        <div>
          <el-switch
            v-model="data.register_usb_driver"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </div>
      </div>
    </template>

    <div class="pl-8 py-2.5 font-bold text-base">控制</div>
    <div class="titleMargin outSet">
      <div class="leftCont">权限</div>
      <div v-if="treeStore.osType == 'win'">
        <el-radio-group v-model="data.authority">
          <el-radio value="0">所有</el-radio>
          <el-radio value="1">只读</el-radio>
          <el-radio value="2">可写</el-radio>
          <el-radio value="3">禁止执行</el-radio>
        </el-radio-group>
      </div>
      <div v-if="treeStore.osType == 'linux'">
        <el-checkbox v-model="linux_authority[0]" true-value="1" false-value="0" disabled
          >读
        </el-checkbox>
        <el-checkbox v-model="linux_authority[1]" true-value="1" false-value="0"
          >写
        </el-checkbox>
        <el-checkbox v-model="linux_authority[2]" true-value="1" false-value="0"
          >执行
        </el-checkbox>
      </div>
    </div>

    <div class="titleMargin outSet" v-if="treeStore.osType == 'win'">
      <div class="leftCont">自动播放</div>
      <div>
        <el-checkbox
          v-model="data.autoplay"
          true-value="1"
          false-value="0"
          :disabled="perFlag"
          >禁止
        </el-checkbox>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, nextTick, computed } from "vue";
import { req_setPeriphreal, req_getPeriphrealConfig } from "~/utils/axios/index.js";
import { ElMessage } from "element-plus";
import { useTreeStore } from "~/utils/pinia/tree.js";
import { _debounce } from "~/utils/common/function.js";
import { eventBus } from "~/utils/common/eventBus.js";

eventBus.on("getStrategyDetail", (detail) => {
  let str = JSON.stringify(detail.data);
  let nstr = str.replace(/\[|\{|\}|\]/g, "");
  data.value = JSON.parse("{" + nstr + "}");
  if (treeStore.osType == "linux") {
    let hex_authority = parseInt(data.value.authority).toString(2);
    linux_authority.value = [hex_authority[0], hex_authority[1], hex_authority[2]];
  }
});
const treeStore = useTreeStore();
const loading = ref(false);
const perFlag = ref(false);
const data = ref({
  peripheral_def: "",
  register_usb_driver: "",
  authority: "",
  autoplay: "",
});
const linux_authority = ref(["1", "0", "0"]);
watch(
  () => linux_authority.value,
  (value, oldValue) => {
    let hex_str = value.join("");
    hex_str = parseInt(Number(hex_str), 2);
    let params = [
      {
        key: "authority",
        value: String(hex_str),
      },
    ];
    if (watchFlag.value) {
      saveConfig(params);
    }
  },
  {
    deep: true, // 开启深度监听，可以监听数组、对象的变化
  }
);

watch(
  () => treeStore.treeDeviceId,
  () => {
    getConfig();
    watchFlag.value = false;
  }
);
onMounted(() => {
  getConfig();
});
const getConfig = async () => {
  if (!treeStore.treeDeviceId) return;
  loading.value = true;
  let params = Object.keys(data.value);
  try {
    const { data: res } = await req_getPeriphrealConfig(treeStore.treeDeviceId, params);
    loading.value = false;
    if (res.status && res.data.length) {
      const getValue = (key) => {
        let value;
        res.data.map((item) => {
          if (item[key]) {
            value = item[key];
          }
        });
        return value;
      };
      Object.keys(data.value).forEach((key) => {
        data.value[key] = getValue(key);
      });
      if (res.osType == "linux") {
        let hex_authority = parseInt(getValue("authority")).toString(2);
        linux_authority.value = [hex_authority[0], hex_authority[1], hex_authority[2]];
      }
      nextTick(() => {
        watchFlag.value = true;
      });
    } else {
      data.value = {
        peripheral_def: "",
        register_usb_driver: "",
        authority: "",
        autoplay: "",
      };
    }
  } catch (err) {
    loading.value = false;
  }
};
const saveConfig = _debounce((params) => {
  if (!treeStore.treeDeviceId) return;
  req_setPeriphreal(treeStore.treeDeviceId, params).then((res) => {
    res.data.succeed ? ElMessage.success("设置成功") : ElMessage.error("设置失败");
    watchFlag.value = false;
    getConfig();
  });
}, 500);
const watchFlag = ref(false);
const paramsData = computed(() => {
  let params = {};
  Object.keys(data.value).forEach((key) => {
    params[key] = data.value[key];
  });
  return params;
});
watch(
  paramsData,
  (val, oldVal) => {
    let params = [];
    for (var k in val) {
      if (val[k] !== oldVal[k]) {
        params.push({
          key: k,
          value: val[k],
        });
      }
    }
    if (watchFlag.value) {
      saveConfig(params);
    }
  },
  {
    deep: true, // 开启深度监听，可以监听数组、对象的变化
  }
);
</script>

<style lang="scss" scoped>
.protectionSet {
  margin-top: -16px;
  color: rgba(0,0,0,.65);
}
.outSet {
  display: flex;
  align-items: center;
  margin: 0 65px 10px 65px;
}

.leftCont {
  margin-right: 20px;
  font-size: 16px;
  width: 70px;
  text-align: right;
}
:deep(.el-checkbox__label) {
  font-size: 16px;
}
.font-bold text-base {
  height: 26px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: rgba(0,0,0,0.85);
line-height: 26px;
text-align: left;
font-style: normal;
}
</style>
